import React from 'react';
import { Modal } from 'antd';
import { CloseOutlined } from '#/utils/antdIcons.js';
import { LineBox, LineSvg } from '../index.js';
import provinceMapBg from '@/assets/datang/province_map_bg.png';
import styles from './index.less';

export default ({ value, onChange, onClose = () => {}, data }) => {
  return (
    <Modal
      width={'80%'}
      visible={true}
      wrapClassName={styles.box_modal}
      title={
        <div className={styles.box__head}>
          <div className={styles.box__title}>外送线路</div>
          <div className={styles.btn} onClick={() => onClose()}>
            <CloseOutlined className={styles.btn_icon} />
          </div>
        </div>
      }
      getContainer={() => document.getElementById('DaTangDashboard')}
      footer={null}
      centered
      destroyOnClose
      closable={false}
      onCancel={() => onClose()}
    >
      <div className={styles.container} style={{ backgroundImage: `url(${provinceMapBg})` }}>
        <div className={styles.rt_box}>
          <LineBox value={value} onChange={onChange} data={data} />
        </div>
        <div className={styles.rt_svg}>
          <LineSvg value={value} />
        </div>
      </div>
    </Modal>
  );
};
